<template>
  <div class="page">
    <div class="topSearch">
      <div class="title"><span style="width: 3px;height: 20px;background-color:#0f79e2;margin-right: 8px"></span><span>工厂库存</span>
      </div>
      <div class="search">
        <span>产品名称：</span>
        <el-input clearable size="small" style="width: 250px" v-model="productName" placeholder="请输入产品名称"></el-input>
        <span>产品编码：</span>
        <el-input clearable size="small" style="width: 250px" v-model="productCode" placeholder="请输入产品编码"></el-input>
        <span v-if="userName=='admin'">选择工厂：</span>
        <el-select v-if="userName=='admin'" clearable v-model="factoryId" size="small" style="width: 250px"
                   placeholder="请选择工厂">
          <el-option v-for="item in factoryList" :key="item.factoryId" :label="item.factoryName"
                     :value='item.factoryId' />
        </el-select>
        <el-button size="small" type="primary" style="width: 80px;margin-left: 20px" @click="getFactoryInventoryList">
          查询
        </el-button>
        <el-button size="small" style="width: 80px;margin-left: 20px" @click="reset">
          重置
        </el-button>
      </div>
    </div>
    <div class="centerTable">
      <!--      <div class="title"><span style="width: 3px;height: 20px;background-color:#0f79e2;margin-right: 8px;margin-bottom: 10px"></span><span>工厂库存列表</span>-->
      <!--      </div>-->


      <!--      <el-button size="small" type="primary" style="width: 100px;" @click="addProduct">新增产品</el-button>-->
      <el-table :data="factoryInventoryData" border height="calc(100vh - 350px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                v-loading='loading'

                :headerCellStyle="{
'textAlign': 'center',
'fontWeight': 400,
'background': '#66b1ff',
'color': 'white',
}">
        <el-table-column prop="id" label="ID" width="80px" />
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="productCode" label="产品编码" />
        <el-table-column prop="norms" label="规格" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="inventoryNum" label="库存数量" />
        <!--          <template slot-scope="scope">-->
        <!--            <el-input-number v-model="scope.row.inventoryNum" @change="handleChange(scope.row)" size="mini" :min="0"-->
        <!--                             label="描述文字"></el-input-number>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="factoryId" label="所属工厂" width="150px">
          <template slot-scope="scope">
            <div class="warehouseTag" v-if="scope.row.factoryId===1"
                 style="border:1px solid #f5b330;background-color:#fef7ea;color:#f5b330;"><img
              src="@/assets/svg/hubei.svg" class="warehouse_icon" /><span>佛山一号工厂</span></div>
            <div class="warehouseTag" v-if="scope.row.factoryId===2"
                 style="border:1px solid #787cfc;background-color:#f1f2ff;color:#787cfc;"><img
              src="@/assets/svg/ningxiangyi.svg" class="warehouse_icon" /><span>佛山二号工厂</span></div>
            <div class="warehouseTag" v-if="scope.row.factoryId===3"
                 style="border:1px solid #497ff4;background-color:#f1f5fe;color:#497ff4;"><img
              src="@/assets/svg/guangdong.svg" class="warehouse_icon" /><span>广西一号工厂</span></div>
            <div class="warehouseTag" v-if="scope.row.factoryId===4"
                 style="border:1px solid #4dc8ee;background-color:#edf9fd;color:#4dc8ee;"><img
              src="@/assets/svg/guangxi.svg" class="warehouse_icon" /><span>侧网工厂</span></div>
            <div class="warehouseTag" v-if="scope.row.factoryId===0"
                 style="border:1px solid #00acf1;background-color:#e5f7f1;color:#00acf1;"><img
              src="@/assets/svg/yunnan.svg" class="warehouse_icon" /><span>其他</span></div>
            <div class="warehouseTag" v-if="scope.row.factoryId===5"
                 style="border:1px solid #4dc8ee;background-color:#edf9fd;color:#4dc8ee;"><img
              src="@/assets/svg/guangxi.svg" class="warehouse_icon" /><span>地柜工厂</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: column">
              <el-link style="text-decoration: none" type="primary" @click="addInventory(scope.row)">修改库存</el-link>
              <el-link style="text-decoration: none" type="success" @click="historyList(scope.row)">修改记录</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
    <el-dialog
      title="新增产品"
      :visible.sync="addDialog"
      width="40%"
      center
      v-loading="loading"
      :show-close="false"
      :before-close="handleClose">

      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;"><span style="color:red;">*</span>产品名称：</div>
        <el-input size="small" v-model="addForm.productName" style="width: 80%"></el-input>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;"><span style="color:red;">*</span>产品编码：</div>
        <el-input size="small" v-model="addForm.productCode" style="width: 80%"></el-input>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;"><span style="color:red;">*</span>所属工厂：</div>
        <el-select clearable v-model="addForm.factoryId" size='small'
                   style="width:80%" placeholder="请选择">
          <el-option v-for="item in factoryList" :key="item.factoryId" :label="item.factoryName"
                     :value='item.factoryId' />
        </el-select>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;"><span style="color:red;">*</span>单价：</div>
        <el-input size="small" v-model="addForm.price" style="width: 80%"></el-input>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;">规格：</div>
        <el-input size="small" v-model="addForm.norms" style="width: 80%"></el-input>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;">单位：</div>
        <el-input size="small" v-model="addForm.unit" style="width: 80%"></el-input>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 30px;">
        <div style="width:80px;text-align: center;">颜色：</div>
        <el-input size="small" v-model="addForm.color" style="width: 80%"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialog = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改库存"
      :visible.sync="addInventoryNum"
      width="30%"
      center
      :show-close="false"
      :before-close="closeAdd">
      <span>库存数量：</span>
      <el-input style="width: 300px" size="small" v-model="addInventoryCount"></el-input>
      <div style="color: grey;margin-top: 10px;font-size: 12px">* 减库存请填负数（例：-200）</div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addInventoryNum = false">取 消</el-button>
    <el-button type="primary" @click="submitAdd">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改记录"
      :visible.sync="historyInventoryNum"
      width="60%"
      center
      :show-close="false"
      :before-close="closeHistory">
      <el-table :data="historyData" border
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
'textAlign': 'center',
'fontWeight': 400,
'background': '#66b1ff',
'color': 'white',
}">
        <el-table-column prop="productCode" label="产品编码" />
        <el-table-column prop="userName" label="修改人" />
        <el-table-column prop="createTime" label="修改时间" />
        <el-table-column prop="num" label="修改数量" />


      </el-table>

    </el-dialog>

  </div>
</template>


<script>
export default {
  data() {
    return {
      productName: "",
      userName: "",
      userId: "",
      productCode: "",
      factoryName: "",
      addInventoryCount: "",
      pageSize: 20,
      pageNumber: 1,
      currentPage: 1,
      factoryId: "",
      totalCount: 0,
      loading: false,
      addDialog: false,
      addInventoryNum: false,
      historyInventoryNum: false,
      addForm: {},
      historyData: [],
      factoryList: [],
      warehouseList: [],
      factoryInventoryData: []
    }
  },
  created() {
    let data = JSON.parse(window.localStorage.getItem('userData'));
    this.userName = data.userName
    if (data.id == 159) this.factoryId = 1
    if (data.id == 160) this.factoryId = 2
    if (data.id == 161) this.factoryId = 3
    if (data.id == 162) this.factoryId = 4
    if (data.id == 163) this.factoryId = 0
    if (data.id == 164) this.factoryId = 5
    this.getFactoryList()
    this.getFactoryInventoryList()
  },
  methods: {
    // handleChange(val) {
    //   console.log(val)
    //   const data = {
    //     factoryId: val.factoryId,
    //     inventoryNum: val.inventoryNum,
    //     productId: val.id
    //   }
    //   this.$api.factoryUpdateFactoryInventoryNum(data).then(res => {
    //     if (res == 1) {
    //       this.$message({ message: "操作成功！", type: 'success' })
    //       this.getFactoryInventoryList()
    //     }
    //   })
    // },
    handleClose() {
    },
    submit() {
      if (this.addForm.productName && this.addForm.productCode && this.addForm.factoryId && this.addForm.price) {
        this.$api.factoryAddFactoryMaterial(this.addForm).then(res => {
          if (res == 1) {
            this.$message({ message: "操作成功！", type: 'success' })
            this.addDialog = false
            this.getFactoryInventoryList()
          }
        })
      } else {
        this.$message({ message: "请检查必填项！", type: 'warning' })
      }

    },
    addProduct() {
      this.addDialog = true
      this.addForm = this.$options.data.call(this).addForm
    },
    getFactoryList() {
      this.$api.factoryGetFactoryList().then(res => {
        this.factoryList = res
      })
    },
    getFactoryInventoryList() {
      this.loading = true
      const params = {
        productName: this.productName,
        productCode: this.productCode,
        factoryId: this.factoryId,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      }
      this.$api.factoryGetFactoryMaterialList(params).then(res => {
        this.loading = false
        this.totalCount = res.total
        this.factoryInventoryData = res.data
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getFactoryInventoryList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getFactoryInventoryList()
    },
    reset() {
      this.productCode = ""
      this.productName = ""
      this.factoryId = ""
      this.pageSize = 20
      this.pageNumber = 1
      this.getFactoryInventoryList()
    },
    addInventory(row) {
      this.addInventoryCount = ""
      this.addInventoryNum = true
      this.addFactoryId = row.factoryId
      this.addProductId = row.productCode
      this.addId = row.id
      this.addCount = row.inventoryNum
    },
    closeAdd() {
      this.addInventoryNum = false
    },
    submitAdd() {
      const data = {
        factoryId: this.addFactoryId,
        inventoryNum: Number(this.addInventoryCount),
        productId: this.addId,
        productCode: this.addProductId
      }
      if (Number(this.addInventoryCount) + this.addCount < 0) return this.$message({ message: "现有库存不足！" })
      this.$api.factoryUpdateFactoryInventoryNum(data).then(res => {
        if (res == 1) {
          this.$message({ message: "操作成功！", type: 'success' })
          this.addInventoryNum = false
          this.getFactoryInventoryList()
        }
      })


    },
    closeHistory() {
      this.historyInventoryNum = false
    },
    historyList(row) {
      this.historyInventoryNum = true
      const params = {
        factoryId: row.factoryId,
        productCode: row.productCode,
      }
      this.$api.purchaseGetFactoryInRecord(params).then(res => {
        this.historyData = res
      })
    }


  }
}


</script>
<style lang='less' scoped>
.title {
  display: flex;
  margin-left: 20px;

  span {
    display: flex;
    margin-top: 20px;
  }

}

.topSearch {
  width: 100%;
  height: 110px;
  box-shadow: inset 0 20px 10px rgba(0, 128, 255, 0.2);
  border-bottom: 1px solid rgba(0, 128, 255, 0.08);

  .search {
    display: flex;
    align-items: center;
    margin-top: 15px;

    span {
      margin-left: 20px;
    }
  }
}

.centerTable {
  margin-top: 20px;

  /deep/ .el-input__inner {
    border: none !important;
  }

  /deep/ .el-input-number--mini {
    width: 120px;
  }

  /deep/ .el-input--mini .el-input__inner {
    font-size: 15px;
  }
}

/deep/ .el-input-number--mini .el-input-number__increase {
  border-radius: 50px !important;
  background-color: #0f79e2 !important;
  color: #fff !important;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

/deep/ .el-input-number--mini .el-input-number__decrease {
  border-radius: 50px !important;
  color: #1e293b !important;
  background-color: #fff;
  border: 1px solid #a6a9ad;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

.warehouseTag {
  display: flex;
  justify-content: center;
  height: 30px;
  align-items: center;
  border-radius: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

.warehouse_icon {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .center {
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
